<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交平台 - 排行榜</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --primary-dark: #0E42D2;
            --secondary: #36CFC9;
            --success: #52C41A;
            --warning: #FAAD14;
            --danger: #FF4D4F;
            --dark: #1D2129;
            --gray: #86909C;
            --light: #F2F3F5;
            --border: #E5E6EB;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F7F8FA;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 1rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 主内容区 */
        .main-content {
            padding: 2rem 0;
        }
        
        /* 页面标题 */
        .page-header {
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border);
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }
        
        .page-desc {
            color: var(--gray);
            max-width: 800px;
        }
        
        /* 排行榜通用样式 */
        .ranking-section {
            margin-bottom: 3.5rem;
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }
        
        .ranking-header {
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .ranking-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0;
            display: flex;
            align-items: center;
        }
        
        .ranking-title i {
            color: var(--primary);
            margin-right: 0.75rem;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-light);
            border-radius: 6px;
        }
        
        .ranking-filters {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        
        .ranking-filter {
            padding: 0.375rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            background-color: var(--light);
            border: none;
        }
        
        .ranking-filter.active {
            background-color: var(--primary);
            color: white;
        }
        
        .view-all {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            display: flex;
            align-items: center;
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            transition: background-color 0.2s;
        }
        
        .view-all:hover {
            color: var(--primary-dark);
            background-color: var(--primary-light);
        }
        
        .view-all i {
            margin-left: 0.25rem;
            font-size: 0.85rem;
        }
        
        /* 1. 热门内容排行榜 */
        .content-ranking {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .content-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: 8px;
            transition: background-color 0.2s;
        }
        
        .content-item:hover {
            background-color: var(--light);
        }
        
        .content-rank {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .content-rank.top-1 {
            background-color: #FFF7E6;
            color: #FAAD14;
        }
        
        .content-rank.top-2 {
            background-color: #F0F2F5;
            color: #86909C;
        }
        
        .content-rank.top-3 {
            background-color: #FFF2F3;
            color: #FF7D00;
        }
        
        .content-image {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .content-info {
            flex: 1;
            min-width: 0;
        }
        
        .content-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .content-meta {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .content-author {
            display: flex;
            align-items: center;
            margin-right: 1.5rem;
        }
        
        .content-author img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 0.5rem;
        }
        
        .content-stats {
            display: flex;
            gap: 1rem;
        }
        
        .content-stat {
            display: flex;
            align-items: center;
        }
        
        .content-stat i {
            margin-right: 0.25rem;
            font-size: 0.85rem;
        }
        
        .content-trend {
            display: flex;
            align-items: center;
            font-size: 0.85rem;
            font-weight: 500;
            margin-left: 1rem;
            flex-shrink: 0;
        }
        
        .content-trend.up {
            color: var(--success);
        }
        
        .content-trend.down {
            color: var(--danger);
        }
        
        .content-trend i {
            margin-right: 0.25rem;
        }
        
        /* 2. 用户影响力排行榜 */
        .users-ranking {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .user-card {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: 10px;
            transition: all 0.2s;
            background-color: white;
            border: 1px solid var(--border);
        }
        
        .user-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
            border-color: transparent;
        }
        
        .user-rank {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .user-rank.top-1 {
            background-color: #FFF7E6;
            color: #FAAD14;
            border: 2px solid #FFD666;
        }
        
        .user-rank.top-2 {
            background-color: #F0F2F5;
            color: #86909C;
            border: 2px solid #C9CDD4;
        }
        
        .user-rank.top-3 {
            background-color: #FFF2F3;
            color: #FF7D00;
            border: 2px solid #FFB88C;
        }
        
        .user-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
            border: 2px solid var(--light);
            flex-shrink: 0;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-weight: 600;
            margin-bottom: 0.15rem;
        }
        
        .user-category {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: 0.5rem;
        }
        
        .user-score {
            font-size: 0.85rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        .user-follow {
            padding: 0.35rem 0.85rem;
            background-color: white;
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.85rem;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .user-follow:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .user-follow.following {
            background-color: var(--primary);
            color: white;
        }
        
        /* 3. 话题热度排行榜 */
        .topics-ranking {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
        }
        
        .topic-card {
            padding: 1.25rem;
            border-radius: 10px;
            background-color: white;
            border: 1px solid var(--border);
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
        
        .topic-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
            border-color: transparent;
        }
        
        .topic-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background-color: var(--primary-light);
            transition: background-color 0.2s;
        }
        
        .topic-card:hover::before {
            background-color: var(--primary);
        }
        
        .topic-rank {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--light);
            transition: color 0.2s;
        }
        
        .topic-card:hover .topic-rank {
            color: var(--primary-light);
        }
        
        .topic-card.top-1::before {
            background-color: #FAAD14;
        }
        
        .topic-card.top-2::before {
            background-color: #86909C;
        }
        
        .topic-card.top-3::before {
            background-color: #FF7D00;
        }
        
        .topic-name {
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            padding-right: 2rem;
        }
        
        .topic-name i {
            color: var(--primary);
            margin-right: 0.5rem;
        }
        
        .topic-desc {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .topic-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
        }
        
        .topic-posts {
            color: var(--gray);
            display: flex;
            align-items: center;
        }
        
        .topic-posts i {
            margin-right: 0.25rem;
            font-size: 0.75rem;
        }
        
        .topic-trend {
            display: flex;
            align-items: center;
            font-weight: 500;
        }
        
        .topic-trend.hot {
            color: var(--danger);
        }
        
        .topic-trend.rising {
            color: var(--success);
        }
        
        /* 4. 小组活跃度排行榜 */
        .groups-ranking {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .group-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-radius: 8px;
            transition: all 0.2s;
            border: 1px solid var(--border);
        }
        
        .group-item:hover {
            background-color: var(--light);
            border-color: var(--primary-light);
        }
        
        .group-rank {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .group-rank.top-1 {
            background-color: #FFF7E6;
            color: #FAAD14;
        }
        
        .group-rank.top-2 {
            background-color: #F0F2F5;
            color: #86909C;
        }
        
        .group-rank.top-3 {
            background-color: #FFF2F3;
            color: #FF7D00;
        }
        
        .group-logo {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .group-info {
            flex: 1;
            min-width: 0;
        }
        
        .group-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .group-members {
            font-size: 0.85rem;
            color: var(--gray);
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
        }
        
        .group-members i {
            margin-right: 0.25rem;
            font-size: 0.85rem;
        }
        
        .group-activity {
            display: flex;
            align-items: center;
            font-size: 0.8rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        .group-activity i {
            margin-right: 0.25rem;
            font-size: 0.75rem;
        }
        
        .group-progress {
            width: 120px;
            height: 8px;
            background-color: var(--light);
            border-radius: 4px;
            margin: 0 1rem;
            overflow: hidden;
        }
        
        .group-progress-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 4px;
        }
        
        .group-join {
            padding: 0.35rem 0.85rem;
            background-color: white;
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.85rem;
            transition: all 0.2s;
            white-space: nowrap;
        }
        
        .group-join:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .group-join.joined {
            background-color: var(--primary);
            color: white;
        }
        
        /* 5. 周榜月榜切换式排行榜 */
        .period-ranking {
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .period-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
        }
        
        .period-tab {
            flex: 1;
            text-align: center;
            padding: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .period-tab.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            margin-bottom: -1px;
        }
        
        .period-content {
            padding: 1rem;
        }
        
        .weekly-ranking, .monthly-ranking {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .trending-item {
            display: flex;
            align-items: center;
            padding: 0.75rem;
            border-radius: 6px;
            transition: background-color 0.2s;
        }
        
        .trending-item:hover {
            background-color: var(--light);
        }
        
        .trending-rank {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-right: 0.75rem;
            color: var(--gray);
        }
        
        .trending-content {
            flex: 1;
            min-width: 0;
        }
        
        .trending-title {
            font-weight: 500;
            margin-bottom: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .trending-meta {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .trending-score {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
            margin-left: 1rem;
            white-space: nowrap;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .users-ranking {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
            
            .topics-ranking {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
            
            .content-trend {
                margin-left: 0.5rem;
            }
            
            .content-stats {
                gap: 0.75rem;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .ranking-title {
                font-size: 1.25rem;
            }
            
            .ranking-header {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .content-item {
                flex-wrap: wrap;
            }
            
            .content-trend {
                margin-left: 0;
                margin-top: 0.5rem;
                order: 4;
            }
            
            .group-item {
                flex-wrap: wrap;
            }
            
            .group-progress {
                width: 100%;
                margin: 0.5rem 0;
                order: 4;
            }
            
            .group-join {
                margin-top: 0.5rem;
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .main-content {
                padding: 1.5rem 0;
            }
            
            .users-ranking,
            .topics-ranking {
                grid-template-columns: 1fr;
            }
            
            .content-image {
                width: 64px;
                height: 64px;
            }
            
            .content-author {
                margin-right: 0.75rem;
            }
            
            .content-stats {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">社交平台</a>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-users me-1"></i> 社区</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-chart-line me-1"></i> 排行榜</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-user me-1"></i> 我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">平台排行榜</h1>
            <p class="page-desc">查看平台上最热门的内容、最具影响力的用户、最受欢迎的话题和最活跃的小组，发现社区中的精彩内容。</p>
        </div>
        
        <!-- 1. 热门内容排行榜 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-fire-alt"></i> 热门内容排行</h2>
                <div class="ranking-filters">
                    <button class="ranking-filter active">全部内容</button>
                    <button class="ranking-filter">文章</button>
                    <button class="ranking-filter">视频</button>
                    <button class="ranking-filter">图片</button>
                </div>
            </div>
            
            <div class="content-ranking">
                <div class="content-item">
                    <div class="content-rank top-1">1</div>
                    <img src="https://picsum.photos/200/200?random=1" class="content-image" alt="热门内容图片">
                    <div class="content-info">
                        <div class="content-title">2023年最值得一去的10个小众旅行地，避开人潮享受宁静</div>
                        <div class="content-meta">
                            <div class="content-author">
                                <img src="https://picsum.photos/50/50?random=101" alt="作者头像">
                                <span>旅行家小明</span>
                            </div>
                            <div class="content-stats">
                                <span class="content-stat"><i class="far fa-eye"></i> 24.5k</span>
                                <span class="content-stat"><i class="far fa-comment"></i> 328</span>
                                <span class="content-stat"><i class="fas fa-heart"></i> 1.2k</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-trend up">
                        <i class="fas fa-arrow-up"></i> 32%
                    </div>
                </div>
                
                <div class="content-item">
                    <div class="content-rank top-2">2</div>
                    <img src="https://picsum.photos/200/200?random=2" class="content-image" alt="热门内容图片">
                    <div class="content-info">
                        <div class="content-title">从零开始学习摄影：掌握这5个技巧，拍出专业级照片</div>
                        <div class="content-meta">
                            <div class="content-author">
                                <img src="https://picsum.photos/50/50?random=102" alt="作者头像">
                                <span>光影记录者</span>
                            </div>
                            <div class="content-stats">
                                <span class="content-stat"><i class="far fa-eye"></i> 18.7k</span>
                                <span class="content-stat"><i class="far fa-comment"></i> 256</span>
                                <span class="content-stat"><i class="fas fa-heart"></i> 987</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-trend up">
                        <i class="fas fa-arrow-up"></i> 18%
                    </div>
                </div>
                
                <div class="content-item">
                    <div class="content-rank top-3">3</div>
                    <img src="https://picsum.photos/200/200?random=3" class="content-image" alt="热门内容图片">
                    <div class="content-info">
                        <div class="content-title">一周减脂餐食谱：健康美味不挨饿，轻松瘦5斤</div>
                        <div class="content-meta">
                            <div class="content-author">
                                <img src="https://picsum.photos/50/50?random=103" alt="作者头像">
                                <span>健康营养师</span>
                            </div>
                            <div class="content-stats">
                                <span class="content-stat"><i class="far fa-eye"></i> 15.2k</span>
                                <span class="content-stat"><i class="far fa-comment"></i> 189</span>
                                <span class="content-stat"><i class="fas fa-heart"></i> 845</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-trend up">
                        <i class="fas fa-arrow-up"></i> 12%
                    </div>
                </div>
                
                <div class="content-item">
                    <div class="content-rank">4</div>
                    <img src="https://picsum.photos/200/200?random=4" class="content-image" alt="热门内容图片">
                    <div class="content-info">
                        <div class="content-title">远程工作效率提升指南：在家办公也能高效产出</div>
                        <div class="content-meta">
                            <div class="content-author">
                                <img src="https://picsum.photos/50/50?random=104" alt="作者头像">
                                <span>职场效率达人</span>
                            </div>
                            <div class="content-stats">
                                <span class="content-stat"><i class="far fa-eye"></i> 12.8k</span>
                                <span class="content-stat"><i class="far fa-comment"></i> 156</span>
                                <span class="content-stat"><i class="fas fa-heart"></i> 732</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-trend down">
                        <i class="fas fa-arrow-down"></i> 3%
                    </div>
                </div>
                
                <div class="content-item">
                    <div class="content-rank">5</div>
                    <img src="https://picsum.photos/200/200?random=5" class="content-image" alt="热门内容图片">
                    <div class="content-info">
                        <div class="content-title">极简主义生活：断舍离后，我的生活发生了这些变化</div>
                        <div class="content-meta">
                            <div class="content-author">
                                <img src="https://picsum.photos/50/50?random=105" alt="作者头像">
                                <span>简约生活家</span>
                            </div>
                            <div class="content-stats">
                                <span class="content-stat"><i class="far fa-eye"></i> 10.5k</span>
                                <span class="content-stat"><i class="far fa-comment"></i> 124</span>
                                <span class="content-stat"><i class="fas fa-heart"></i> 654</span>
                            </div>
                        </div>
                    </div>
                    <div class="content-trend up">
                        <i class="fas fa-arrow-up"></i> 8%
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
            </div>
        </div>
        
        <!-- 2. 用户影响力排行榜 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-crown"></i> 用户影响力排行</h2>
                <div class="ranking-filters">
                    <button class="ranking-filter active">综合影响力</button>
                    <button class="ranking-filter">创作力</button>
                    <button class="ranking-filter">互动力</button>
                    <button class="ranking-filter">新势力</button>
                </div>
            </div>
            
            <div class="users-ranking">
                <div class="user-card">
                    <div class="user-rank top-1">1</div>
                    <img src="https://picsum.photos/100/100?random=21" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">旅行家陈默</div>
                        <div class="user-category">旅行 · 摄影</div>
                        <div class="user-score">影响力指数: 9876</div>
                    </div>
                    <button class="user-follow following">已关注</button>
                </div>
                
                <div class="user-card">
                    <div class="user-rank top-2">2</div>
                    <img src="https://picsum.photos/100/100?random=22" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">美食家小雨</div>
                        <div class="user-category">美食 · 生活</div>
                        <div class="user-score">影响力指数: 9452</div>
                    </div>
                    <button class="user-follow">关注</button>
                </div>
                
                <div class="user-card">
                    <div class="user-rank top-3">3</div>
                    <img src="https://picsum.photos/100/100?random=23" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">科技评论员老王</div>
                        <div class="user-category">科技 · 评论</div>
                        <div class="user-score">影响力指数: 8976</div>
                    </div>
                    <button class="user-follow">关注</button>
                </div>
                
                <div class="user-card">
                    <div class="user-rank">4</div>
                    <img src="https://picsum.photos/100/100?random=24" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">健身教练张婷</div>
                        <div class="user-category">健身 · 健康</div>
                        <div class="user-score">影响力指数: 8542</div>
                    </div>
                    <button class="user-follow">关注</button>
                </div>
                
                <div class="user-card">
                    <div class="user-rank">5</div>
                    <img src="https://picsum.photos/100/100?random=25" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">职场导师李明</div>
                        <div class="user-category">职场 · 成长</div>
                        <div class="user-score">影响力指数: 8215</div>
                    </div>
                    <button class="user-follow following">已关注</button>
                </div>
                
                <div class="user-card">
                    <div class="user-rank">6</div>
                    <img src="https://picsum.photos/100/100?random=26" class="user-avatar" alt="用户头像">
                    <div class="user-info">
                        <div class="user-name">读书博主赵敏</div>
                        <div class="user-category">阅读 · 文化</div>
                        <div class="user-score">影响力指数: 7986</div>
                    </div>
                    <button class="user-follow">关注</button>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
            </div>
        </div>
        
        <!-- 3. 话题热度排行榜 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-tags"></i> 话题热度排行</h2>
                <div class="ranking-filters">
                    <button class="ranking-filter active">全部话题</button>
                    <button class="ranking-filter">今日热门</button>
                    <button class="ranking-filter">本周上升</button>
                </div>
            </div>
            
            <div class="topics-ranking">
                <div class="topic-card top-1">
                    <div class="topic-rank">1</div>
                    <div class="topic-name"><i class="fas fa-hashtag"></i> 人工智能与未来生活</div>
                    <div class="topic-desc">讨论AI技术如何改变我们的日常生活、工作方式和社会结构</div>
                    <div class="topic-stats">
                        <div class="topic-posts"><i class="far fa-comment"></i> 5.2k 帖子</div>
                        <div class="topic-trend hot"><i class="fas fa-fire"></i> 爆火</div>
                    </div>
                </div>
                
                <div class="topic-card top-2">
                    <div class="topic-rank">2</div>
                    <div class="topic-name"><i class="fas fa-hashtag"></i> 可持续旅行方式</div>
                    <div class="topic-desc">探索环保、负责任的旅行方式，如何减少旅行对环境的影响</div>
                    <div class="topic-stats">
                        <div class="topic-posts"><i class="far fa-comment"></i> 3.8k 帖子</div>
                        <div class="topic-trend hot"><i class="fas fa-fire"></i> 爆火</div>
                    </div>
                </div>
                
                <div class="topic-card top-3">
                    <div class="topic-rank">3</div>
                    <div class="topic-name"><i class="fas fa-hashtag"></i> 居家健身指南</div>
                    <div class="topic-desc">分享无需器械或简单器械即可进行的高效健身方法和计划</div>
                    <div class="topic-stats">
                        <div class="topic-posts"><i class="far fa-comment"></i> 3.2k 帖子</div>
                        <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                    </div>
                </div>
                
                <div class="topic-card">
                    <div class="topic-rank">4</div>
                    <div class="topic-name"><i class="fas fa-hashtag"></i> 远程工作技巧</div>
                    <div class="topic-desc">探讨如何提高远程工作效率、保持工作生活平衡的实用技巧</div>
                    <div class="topic-stats">
                        <div class="topic-posts"><i class="far fa-comment"></i> 2.9k 帖子</div>
                        <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                    </div>
                </div>
                
                <div class="topic-card">
                    <div class="topic-rank">5</div>
                    <div class="topic-name"><i class="fas fa-hashtag"></i> 极简主义生活</div>
                    <div class="topic-desc">分享断舍离经验、简约生活方式和如何减少物质依赖的心得</div>
                    <div class="topic-stats">
                        <div class="topic-posts"><i class="far fa-comment"></i> 2.5k 帖子</div>
                        <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                    </div>
                </div>
                
                <div class="topic-card">
                    <div class="topic-rank">6</div>
                    <div class="topic-name"><i class="fas fa-hashtag"></i> 独立游戏推荐</div>
                    <div class="topic-desc">发现那些不为人知但制作精良的独立游戏作品和开发者故事</div>
                    <div class="topic-stats">
                        <div class="topic-posts"><i class="far fa-comment"></i> 2.1k 帖子</div>
                        <div class="topic-trend rising"><i class="fas fa-arrow-up"></i> 上升</div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
            </div>
        </div>
        
        <!-- 4. 小组活跃度排行榜 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-users"></i> 小组活跃度排行</h2>
                <div class="ranking-filters">
                    <button class="ranking-filter active">综合活跃</button>
                    <button class="ranking-filter">新帖数量</button>
                    <button class="ranking-filter">成员增长</button>
                </div>
            </div>
            
            <div class="groups-ranking">
                <div class="group-item">
                    <div class="group-rank top-1">1</div>
                    <img src="https://picsum.photos/100/100?random=31" class="group-logo" alt="小组logo">
                    <div class="group-info">
                        <div class="group-name">城市摄影爱好者</div>
                        <div class="group-members"><i class="fas fa-user-friends"></i> 8,752 名成员</div>
                        <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 42</div>
                    </div>
                    <div class="group-progress">
                        <div class="group-progress-bar" style="width: 96%"></div>
                    </div>
                    <button class="group-join joined">已加入</button>
                </div>
                
                <div class="group-item">
                    <div class="group-rank top-2">2</div>
                    <img src="https://picsum.photos/100/100?random=32" class="group-logo" alt="小组logo">
                    <div class="group-info">
                        <div class="group-name">美食探索家</div>
                        <div class="group-members"><i class="fas fa-user-friends"></i> 12,451 名成员</div>
                        <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 36</div>
                    </div>
                    <div class="group-progress">
                        <div class="group-progress-bar" style="width: 88%"></div>
                    </div>
                    <button class="group-join">加入</button>
                </div>
                
                <div class="group-item">
                    <div class="group-rank top-3">3</div>
                    <img src="https://picsum.photos/100/100?random=33" class="group-logo" alt="小组logo">
                    <div class="group-info">
                        <div class="group-name">科技发烧友</div>
                        <div class="group-members"><i class="fas fa-user-friends"></i> 7,328 名成员</div>
                        <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 29</div>
                    </div>
                    <div class="group-progress">
                        <div class="group-progress-bar" style="width: 79%"></div>
                    </div>
                    <button class="group-join">加入</button>
                </div>
                
                <div class="group-item">
                    <div class="group-rank">4</div>
                    <img src="https://picsum.photos/100/100?random=34" class="group-logo" alt="小组logo">
                    <div class="group-info">
                        <div class="group-name">职场交流圈</div>
                        <div class="group-members"><i class="fas fa-user-friends"></i> 9,567 名成员</div>
                        <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 25</div>
                    </div>
                    <div class="group-progress">
                        <div class="group-progress-bar" style="width: 72%"></div>
                    </div>
                    <button class="group-join joined">已加入</button>
                </div>
                
                <div class="group-item">
                    <div class="group-rank">5</div>
                    <img src="https://picsum.photos/100/100?random=35" class="group-logo" alt="小组logo">
                    <div class="group-info">
                        <div class="group-name">健身打卡群</div>
                        <div class="group-members"><i class="fas fa-user-friends"></i> 6,843 名成员</div>
                        <div class="group-activity"><i class="fas fa-comment-alt"></i> 今日新帖: 21</div>
                    </div>
                    <div class="group-progress">
                        <div class="group-progress-bar" style="width: 65%"></div>
                    </div>
                    <button class="group-join">加入</button>
                </div>
            </div>
            
            <div class="text-center mt-3">
                <a href="#" class="view-all">查看完整排行榜 <i class="fas fa-angle-right"></i></a>
            </div>
        </div>
        
        <!-- 5. 周榜月榜切换式排行榜 -->
        <div class="ranking-section">
            <div class="ranking-header">
                <h2 class="ranking-title"><i class="fas fa-chart-line"></i> 趋势内容排行</h2>
            </div>
            
            <div class="period-ranking">
                <div class="period-tabs">
                    <div class="period-tab active" data-period="weekly">本周趋势</div>
                    <div class="period-tab" data-period="monthly">本月趋势</div>
                </div>
                
                <div class="period-content">
                    <div class="weekly-ranking">
                        <div class="trending-item">
                            <div class="trending-rank">1</div>
                            <div class="trending-content">
                                <div class="trending-title">新一代AI工具如何提升工作效率</div>
                                <div class="trending-meta">科技 · 24.5k 浏览</div>
                            </div>
                            <div class="trending-score">98.6</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">2</div>
                            <div class="trending-content">
                                <div class="trending-title">秋季健康食谱：增强免疫力的5种食材</div>
                                <div class="trending-meta">健康 · 18.7k 浏览</div>
                            </div>
                            <div class="trending-score">92.3</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">3</div>
                            <div class="trending-content">
                                <div class="trending-title">2023年度最佳旅行摄影作品赏析</div>
                                <div class="trending-meta">摄影 · 15.2k 浏览</div>
                            </div>
                            <div class="trending-score">89.7</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">4</div>
                            <div class="trending-content">
                                <div class="trending-title">如何建立健康的数字生活习惯</div>
                                <div class="trending-meta">生活 · 12.8k 浏览</div>
                            </div>
                            <div class="trending-score">85.4</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">5</div>
                            <div class="trending-content">
                                <div class="trending-title">初学者摄影器材选购指南</div>
                                <div class="trending-meta">摄影 · 10.5k 浏览</div>
                            </div>
                            <div class="trending-score">81.2</div>
                        </div>
                    </div>
                    
                    <div class="monthly-ranking" style="display: none;">
                        <div class="trending-item">
                            <div class="trending-rank">1</div>
                            <div class="trending-content">
                                <div class="trending-title">2023年最值得学习的5项新技能</div>
                                <div class="trending-meta">职场 · 78.3k 浏览</div>
                            </div>
                            <div class="trending-score">96.8</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">2</div>
                            <div class="trending-content">
                                <div class="trending-title">远程工作完全指南：从工具到心态</div>
                                <div class="trending-meta">职场 · 65.4k 浏览</div>
                            </div>
                            <div class="trending-score">93.5</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">3</div>
                            <div class="trending-content">
                                <div class="trending-title">环球背包旅行省钱攻略</div>
                                <div class="trending-meta">旅行 · 58.7k 浏览</div>
                            </div>
                            <div class="trending-score">89.2</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">4</div>
                            <div class="trending-content">
                                <div class="trending-title">家庭园艺：从零开始的蔬菜种植</div>
                                <div class="trending-meta">生活 · 42.1k 浏览</div>
                            </div>
                            <div class="trending-score">85.7</div>
                        </div>
                        
                        <div class="trending-item">
                            <div class="trending-rank">5</div>
                            <div class="trending-content">
                                <div class="trending-title">心理健康：应对现代生活压力的方法</div>
                                <div class="trending-meta">健康 · 38.6k 浏览</div>
                            </div>
                            <div class="trending-score">82.4</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 排行榜筛选器切换
            const rankingFilters = document.querySelectorAll('.ranking-filter');
            rankingFilters.forEach(filter => {
                filter.addEventListener('click', function() {
                    // 只在同一组内切换active状态
                    const parentGroup = this.parentElement;
                    parentGroup.querySelectorAll('.ranking-filter').forEach(f => {
                        f.classList.remove('active');
                    });
                    this.classList.add('active');
                });
            });
            
            // 关注按钮交互
            const followButtons = document.querySelectorAll('.user-follow');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.classList.contains('following')) {
                        this.classList.remove('following');
                        this.textContent = '关注';
                        this.style.backgroundColor = 'white';
                        this.style.color = 'var(--primary)';
                    } else {
                        this.classList.add('following');
                        this.textContent = '已关注';
                        this.style.backgroundColor = 'var(--primary)';
                        this.style.color = 'white';
                    }
                });
            });
            
            // 加入小组按钮交互
            const joinButtons = document.querySelectorAll('.group-join');
            joinButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.classList.contains('joined')) {
                        this.classList.remove('joined');
                        this.textContent = '加入';
                        this.style.backgroundColor = 'white';
                        this.style.color = 'var(--primary)';
                    } else {
                        this.classList.add('joined');
                        this.textContent = '已加入';
                        this.style.backgroundColor = 'var(--primary)';
                        this.style.color = 'white';
                    }
                });
            });
            
            // 周榜月榜切换
            const periodTabs = document.querySelectorAll('.period-tab');
            periodTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    periodTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    const period = this.getAttribute('data-period');
                    if (period === 'weekly') {
                        document.querySelector('.weekly-ranking').style.display = 'flex';
                        document.querySelector('.monthly-ranking').style.display = 'none';
                    } else {
                        document.querySelector('.weekly-ranking').style.display = 'none';
                        document.querySelector('.monthly-ranking').style.display = 'flex';
                    }
                });
            });
        });
    </script>
</body>
</html>
    
